<template>
  <view style="height:112rpx;width: 100%;">
    <view class="floorNavbar" :style="style">
		<scroll-view style="width: 100%;  height: 100%;" scroll-x="true" scroll-with-animation  scroll-into-view-alignment="center" 	:scroll-into-view="floorIndex">
			<!-- <scroll-view style="width: 100%;  height: 100%;" scroll-x="true" scroll-with-animation    :scroll-left="scrollLeft">  -->
			<view class="floorNavbar-content">
			  <view v-for="(item, index) in floorNavData"  :key="index" :id="`flootItem${index}`" :class="['floor-item',item.isSelect?'select': '']"  @click="select(index)" >
				 {{item.name}}
			  </view>
			</view>		
		</scroll-view>
	</view>
  </view>
</template>

<script>
  export default {
    props: {
      floorNavData: {
        //navbarData   由父页面传递的数据，变量名字自命名
        // type: Object
      },
    
    },

    data() {
      return {
		floorIndex: 'flootItem0',
        share: '',
        statusBarHeight: 0,
        titleBarHeight: 0,
		scrollLeft: 0
      }
    },
	 watch: {
	    floorNavData(newValue, oldValue) {
		
		let index = newValue.findIndex(item => item.isSelect );
			this.floorIndex = 'flootItem'+index;
	    }
	  },
	created() {
   		this.init()
   	},
	
    computed: {
	
		style() {
		  var style = 'top:'.concat(this.statusBarHeight + this.titleBarHeight, 'px;');
		  return style;
		}
    },


    methods: {
		
		
		init(){
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			let rect = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息
			uni.getMenuButtonBoundingClientRect();
			let navBarHeight = (function() {
			  //导航栏高度
			  let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距
			  return 2 * gap + rect.height;
			})();
			this.titleBarHeight = navBarHeight;  
		},
		
     
      //返回到首页
		select(i) {
		  this.$emit('childEvent', i);
		}
	}
}	
	</script>

<style lang="less">
  .floorNavbar {
    position: fixed;
    top: 0;
    width: 100%;
	height: 112rpx;
    z-index: 200000;
    box-sizing: border-box;
	background-color: #fff;
	padding:0 ;
	margin:0
  }

  .floorNavbar-content {
	padding-right: 48rpx;
	height: 112rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
  }
  
   .floor-item {
    // margin:0 6rpx;
    /* display: inline-block; */
    box-sizing: border-box;
   height: 112rpx;
    // min-width: 56rpx;
    padding-left:  48rpx;
	color: #C6C6C6;
    line-height: 112rpx;
    font-size: 28rpx;
    text-align: center;
    flex-shrink: 0;
	font-family: 'NotoSansSC-Medium';
	// font-weight: 500;
    
  }
  
  .select{
	 color: #000; 
  }


</style>
